import * as types from "../types";
//导入 获取 menu的方法
import { getMenu } from "../../api";
import Vue from "vue";

export default {
  state: {
    // state中的数据是局部的  getters，mutations，actions的数据是全局的
    menus: [],
    tabs: {
      "/dashboard": {
        path: "/dashboard",
        label: "首页",
        name: "/dashboard",
        componentName: "Dashboard",
      },
    }, // 数据结构：{}
    currentPath: "/dashboard", //网站当前的路由
  },
  getters: {
    // getters，mutations，actions的数据是全局的  这样menus 就可以在全局使用了 可以简化代码
    menus: (state) => state.menus,
    tabs: (state) => Object.values(state.tabs),
    currentPath: (state) => state.currentPath,
    //  做动态组件的缓存  include数组中包含的就能实现缓存
    componentNames: (state) =>
      Object.values(state.tabs).map((item) => item.componentName),
  },
  mutations: {
    // 这里面的方法 是唯一 可以改变state中的数据的
    [types.SET_MENU](state, menus) {
      state.menus = menus;
    },
    [types.ADD_TABS]({ tabs }, tab) {
      // 设置tabs ， 以(参数2)tab.path作为key，以（参数3）tab作为值
      Vue.set(tabs, tab.path, tab);
    },
    [types.DELETE_TABS]({ tabs }, tab) {
      Vue.delete(tabs, tab.path);
    },
    [types.SET_CURRENT_PATH](state, path) {
      //   这里的currentPath不能使用state的结构语法 ，解构了就是值拷贝，这里需要是用深拷贝进行赋值操作
      state.currentPath = path;
    },
  },
  actions: {
    //写完 actions 之后  调用 actions 获取数据 然后再把数据在页面中渲染出来
    // 异步 修改 state 中的数据
    // actions 中的 方法 接受的参数 是 context 对象 里面有store实例的各种方法
    async [types.SET_MENU]({ commit }) {
      try {
        const menus = await getMenu();
        // console.log(menus);
        // commit ：作用 提交 mutation
        commit(types.SET_MENU, menus);
      } catch (err) {
        return Promise.reject(err);
      }
    },
  },
};
